<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:a4j="http://richfaces.org/a4j"
  xmlns:rich="http://richfaces.org/rich"
  xmlns:zanata="http://java.sun.com/jsf/composite/zanata"
  template="/WEB-INF/template/template.xhtml">

  <f:metadata>
    <f:viewParam name="slug" value="#{versionGroupHomeAction.slug}"/>
    <f:viewParam name="slug" value="#{versionGroupHome.slug}"/>
    <f:viewParam name="slug" value="#{versionGroupJoinAction.slug}"/>
    <f:event type="preRenderView" listener="#{versionGroupHome.validateSuppliedId}"/>
  </f:metadata>

<ui:define name="page_title">
  #{msgs['jsf.Groups']} - #{versionGroupHome.instance.name}
</ui:define>

<ui:define name="center_content">
<script type="text/javascript">
  //<![CDATA[
  jQuery(function () {
    crossroads.ignoreState = true /* Make sure every url modification gets parsed */
    crossroads.addRoute(':pre*:/version-group/view/{slug}/languages/:lang::?query:',
      function (pre, slug, lang, query) {
        zanata.tabs.activate(jQuery('#languages_tab'));
        var clickEle = jQuery('a.locale-' + lang);
        if (lang && clickEle.length != 0) {
          updateActiveRow(clickEle);
          toggleColumn('languages');
          reloadLocale(lang)
        }
      });

    crossroads.addRoute(':pre*:/version-group/view/{slug}/projects/{proj}/{ver}:?query:',
      function (pre, slug, proj, ver, query) {
        zanata.tabs.activate(jQuery('#projects_tab'));
        var clickEle = jQuery('#' + jqSelector(proj + "[" + ver + "]") + " a");
        if (clickEle.length != 0) {
          updateActiveRow(clickEle);
          toggleColumn('projects');
          reloadVersion(proj, ver)
        }
      });

    crossroads.addRoute(':pre*:/version-group/view/{slug}/settings/:setting::?query:',
      function (pre, slug, setting, query) {
        zanata.tabs.activate(jQuery('#settings_tab'));
        setting = setting || 'general';
        setting =
          validateTab("#settings-" + setting + '_tab', setting, 'general');
        zanata.tabs.activate(jQuery('#settings-' + jqSelector(setting) +
          "_tab"))
      });

    crossroads.addRoute(':pre*:/version-group/view/{slug}/:section::?query:',
      function (pre, slug, section, query) {
        section = section || 'languages';
        section = validateTab('#' + section + "_tab", section, "languages");
        zanata.tabs.activate(jQuery('#' + section + "_tab"))
      });

    updateStateFromUrl();
    renderStatistics();
  });
  //]]>
</script>

  <h:outputScript>
    function refreshStatistics() {
      setTimeout(refreshStatisticsData, 0);
    }
  </h:outputScript>

  <h:form styleClass="l--push-bottom-0">
    <a4j:jsFunction name="reloadLocale" status="languageTab-projectsLoader"
      onbegin="clearHTML('#{rich:clientId('languages-project_list')}');clearHTML('#{rich:clientId('language-label')}');zanata.loader.activate('#languagesTab-language-label-loader')"
      oncomplete="zanata.loader.deactivate('#languagesTab-language-label-loader'); zanata.panel.init()"
      limitRender="true"
      render="languages-project_list, language-label, languageTabVersionFilter-pager, languageTabVersionFilter-page-info">
      <a4j:param name="val1" assignTo="#{versionGroupHomeAction.selectedLocaleId}"/>
    </a4j:jsFunction>

    <a4j:jsFunction name="reloadVersion" status="projectsTab-languagesLoader"
      onbegin="clearHTML('#{rich:clientId('projects-language_list')}');clearHTML('#{rich:clientId('project-label')}');zanata.loader.activate('#projectsTab-project-label-loader')"
      oncomplete="zanata.loader.deactivate('#projectsTab-project-label-loader'); zanata.panel.init()"
      limitRender="true"
      render="projects-language_list, project-label, projectTabLanguageFilter-pager, projectTabLanguageFilter-page-info"
      action="#{versionGroupHomeAction.setSelectedVersionSlug(projSlug, verSlug)}">
      <a4j:param name="val1" assignTo="#{projSlug}"/>
      <a4j:param name="val2" assignTo="#{verSlug}"/>
    </a4j:jsFunction>

    <a4j:jsFunction name="refreshStatisticsData" status="statistic-loader"
      action="#{versionGroupHomeAction.resetPageData}"
      limitRender="true"
      render="overall_statistic,languages-language_form,languages-project_list,language-label,projects-project_form,projects-language_list,project-label,languages-size,projects-size"/>

    <a4j:jsFunction name="renderStatistics" status="statistic-loader"
      limitRender="true"
      render="overall_statistic, languages-language_form, languages-project_list, projects-project_form, projects-language_list"
      action="#{versionGroupHomeAction.setPageRendered(true)}"
      oncomplete="updateStateFromUrl(); zanata.panel.init()"/>
  </h:form>

<div class="g u-fullWidth">
  <div class="g__item w--1-m w--3-8-l w--1-3 l--push-bottom-half">
    <p class="txt--meta l--push-all-0">
      <a href="#{request.contextPath}/dashboard/groups">
        #{msgs['jsf.Groups']}
      </a>
    </p>

    <h:panelGroup layout="block"  styleClass="media l--push-bottom-half" id="group-info">
      <div class="media__body">
        <h1 class="l--push-all-0">
          #{versionGroupHome.instance.name}
        </h1>

        <p class="txt--understated">
          #{versionGroupHome.instance.description}
        </p>
      </div>
    </h:panelGroup>
    <h:panelGroup layout="block"  id="overall_statistic" styleClass="progress-bar__expander">
      <p class="d--top l--pad-top-half txt--mini">
        <ui:fragment rendered="#{versionHomeAction.pageRendered}">
          <h:outputFormat escape="false"
            value="#{msgs.format('jsf.TotalSourceContains', versionGroupHomeAction.overallStatistic.total)}"/>
        </ui:fragment>
      </p>
      <ul class="g g--fit">
        <ui:param name="showApproved" value="#{versionGroupHomeAction.overallStatistic.percentApproved ne 0}"/>
        <ui:fragment rendered="#{showApproved}">
          <li class="g__item l--push-bottom-half">
          <span class="stats txt--state-highlight">
            <zanata:loader type="loader--small" rendered="#{!versionGroupHomeAction.pageRendered}"/>
            <h:panelGroup styleClass="stats__figure" rendered="#{versionGroupHomeAction.pageRendered}">
              #{statisticBar.formatPercentage(versionGroupHomeAction.overallStatistic.percentApproved)}%
            </h:panelGroup>
            <span class="stats__unit txt--lowercase">
              #{msgs['jsf.stats.Approved']}
            </span>
          </span>
          </li>
        </ui:fragment>

        <li class="g__item l--push-bottom-half">
          <span class="txt--state-success #{showApproved ? 'stats' : 'stats--large'}">
            <zanata:loader type="loader--small" rendered="#{!versionGroupHomeAction.pageRendered}"/>
            <h:panelGroup styleClass="stats__figure" rendered="#{versionGroupHomeAction.pageRendered}">
              #{statisticBar.formatPercentage(versionGroupHomeAction.overallStatistic.percentTranslated)}%
            </h:panelGroup>
            <span class="stats__unit txt--lowercase">
              #{msgs['jsf.stats.Translated']}
            </span>
          </span>
        </li>
        <li class="g__item l--push-bottom-half">
          <span class="#{showApproved ? 'stats' : 'stats--large'}">
            <zanata:loader type="loader--small" rendered="#{!versionGroupHomeAction.pageRendered}"/>
            <h:panelGroup styleClass="stats__figure" rendered="#{versionGroupHomeAction.pageRendered}">
              #{statisticBar.formatPercentage(versionGroupHomeAction.overallStatistic.remainingHours)}%
            </h:panelGroup>
            <span class="stats__unit">
              #{msgs['jsf.stats.TotalHoursRemaining']}
            </span>
          </span>
        </li>
      </ul>
      <zanata:statistic type="large" value="#{versionGroupHomeAction.overallStatistic}"
        rendered="#{versionGroupHomeAction.pageRendered}"/>

      <a4j:status name="statistic-loader">
        <f:facet name="start">
          <zanata:loader type="loader--large"/>
        </f:facet>
      </a4j:status>
    </h:panelGroup>
  </div>

  <div class="g__item w--1-m w--5-8-l w--2-3">
    <div class="tabs--lined js-tabs">
      <ul class="tabs__nav js-tabs-nav">
        <li>
          <a id="languages_tab"
            href="#{request.contextPath}/version-group/view/#{versionGroupHomeAction.slug}/languages"
            class="js-url-mod" data-content="#languages">
            <i class="i i--language"></i>
              <span class="is-hidden--s i__text--right">
                #{msgs['jsf.Languages']}
              </span>
            <h:panelGroup styleClass="txt--neutral" id="languages-size">
              #{versionGroupHomeAction.activeLocales.size()}
            </h:panelGroup>
          </a>
        </li>
        <li>
          <a id="projects_tab"
            href="#{request.contextPath}/version-group/view/#{versionGroupHomeAction.slug}/projects"
            class="js-url-mod" data-content="#projects">
            <i class="i i--project"></i>
              <span class="is-hidden--s i__text--right">
                #{msgs['jsf.Projects']}
              </span>
            <h:panelGroup id="projects-size" layout="inline" styleClass="txt--neutral">
              #{versionGroupHomeAction.getProjectIterations().size()}
            </h:panelGroup>
          </a>
        </li>
        <li>
          <a id="maintainers_tab"
            href="#{request.contextPath}/version-group/view/#{versionGroupHomeAction.slug}/maintainers"
            class="js-url-mod" data-content="#maintainers">
            <i class="i i--users"></i>
              <span class="is-hidden--s i__text--right">
                #{msgs['jsf.Maintainers']}
              </span>
            <h:panelGroup styleClass="txt--neutral" id="maintainers-size">
              #{versionGroupHome.instance.maintainers.size()}
            </h:panelGroup>
          </a>
        </li>

        <ui:fragment
          rendered="#{versionGroupHomeAction.isUserProjectMaintainer()}">
          <li class="tab__end">
            <div
              class="dropdown dropdown--tab dropdown--small dropdown--right dropdown--inline js-dropdown">
              <a class="dropdown__toggle js-dropdown__toggle" href="#"
                title="#{msgs['jsf.tooltip.MoreActions']}"><i
                class="i i--ellipsis"></i></a>
              <ul class="dropdown__content js-dropdown__content"
                role="content"
                aria-labelledby="dropdownContent">
                <li>
                  <a href="#" class="i__item--right"
                    data-toggle="modal" onclick="return false;"
                    data-target="#joinGroupDialog">
                    #{msgs.format('jsf.RequestAddProjectToGroup', versionGroupHome.instance.name)}
                    <i class="i i--project i__item__icon"></i>
                  </a>
                </li>
              </ul>
            </div>
          </li>
        </ui:fragment>

        <ui:fragment
          rendered="#{identity.hasPermission(versionGroupHome.instance, 'update')}">
          <li class="tab__end">
            <a id="settings_tab"
              href="#{request.contextPath}/version-group/view/#{versionGroupHomeAction.slug}/settings"
              class="js-url-mod" data-content="#settings">
                <span class="is-hidden--s i__text--left">
                  #{msgs['jsf.Settings']}
                </span>
              <i class="i i--settings"></i>
            </a>
          </li>
        </ui:fragment>
      </ul>

      <ul class="tabsContent panels__container js-tabs-content l--push-top-1">
        <li id="languages">
          <ui:include
            src="/WEB-INF/layout/version-group/languages-tab.xhtml">
          </ui:include>
        </li>

        <li id="projects">
          <ui:include
            src="/WEB-INF/layout/version-group/projects-tab.xhtml"/>
        </li>

        <li id="maintainers">
          <zanata:maintainers-tab
            listSize="#{versionGroupHome.instanceMaintainers.size()}"
            filterActionBean="#{versionGroupHome.maintainerFilter}"
            settingsUrl="#settings-maintainers"
            PermissionToUpdate="#{identity.hasPermission(versionGroupHome.instance, 'update')}"/>
        </li>

        <ui:fragment
          rendered="#{identity.hasPermission(versionGroupHome.instance, 'update')}">
          <li id="settings">
            <ui:include
              src="/WEB-INF/layout/version-group/settings-tab.xhtml"/>
          </li>
        </ui:fragment>
      </ul>
    </div>
  </div>
</div>
  <ui:fragment
    rendered="#{versionGroupHomeAction.isUserProjectMaintainer()}">
    <ui:include src="/WEB-INF/layout/version-group/request_join_modal.xhtml"/>
  </ui:fragment>

</ui:define>
</ui:composition>
